<template>
    <div class="path-index">
      <Header v-if="pathStatus">添加地址</Header>
      <Header v-else>编辑地址</Header>
      <section>
        <!-- 编辑地址 -->
        <van-address-edit
        v-if="pathStatus"
        :area-list="areaList"
        show-set-default
        @save="onSave"
        @delete="onDelete"
        />
        <!-- 添加地址 -->
        <van-address-edit
        v-else
        :address-info="AddressInfo"
        :area-list="areaList"
        show-delete
        show-set-default
        show-search-result
        @save="onUpdate"
        @delete="onDelete"
        />
      </section>
      <Tabbar></Tabbar>
    </div>
  </template>
  
  <script>
  import Header from '@/components/path/Header.vue'
  import Tabbar from '@/components/common/Tabbar.vue'
  import { Toast } from 'vant';
  //默认省市区数据
  import { areaList } from '@vant/area-data';
  //引入axios的二次封装
  import http from '@/common/api/request.js'
  import axios  from 'axios';
  export default {
      name:'path-list',
      components:{
          Header,
          Tabbar
      },
      data() {
        return {
            areaList,//vant组件中的地区数据
            key:'',//如果是通过添加界面进入，key的值为add，如果不是key的值为一个点击对象
            pathStatus:false,//进行地址状态的判断
            AddressInfo:'',//编辑地址时初始提示信息
            areaCode:'',//地区编码
            };
        },
    created(){
        //实现判断是通过添加地址进入还是点击地址进入编辑地址
        //判断是否存在本地存储key
        if(sessionStorage.getItem('key')){
            //如果存在直接获取
            this.key=sessionStorage.getItem('key')
           }else{
            //不存在设置一个
            this.key =this.$route.params.key
            sessionStorage.setItem('key',this.key)
        }
        this.key = JSON.parse(this.key)
        //是通过添加地址进来的
        if(this.key=='add'){
            this.pathStatus=true
        }else{
            //通过编辑进来的
            //进入编辑后使得默认信息为用户点进去的信息
           this.AddressInfo = this.key
           //地区编码
           this.AddressInfo.areaCode=this.key.areaCode
           //因为数据库存储是否为默认地址为0/1所以要进行判断
           if(this.key.isDefault== 0){
            this.AddressInfo.isDefault= false
           }else{
            this.AddressInfo.isDefault= true
           }
        }
        
    },
     //离开界面的时候销毁（一定要销毁不然每次跳转到界面会是之前的本地存储导致判断不为空 也获取不到）
     beforeDestroy() {
        sessionStorage.removeItem('key')
   	},
    methods: {
        //点击保存触发(content为save的默认回调函数，返回的是用户在表单填写的信息)
        onSave(content) {
            content.isDefault=content.isDefault ? 1 : 0
            http.$axios({
                url:'/api/addAddress',
                method: 'POST',
                headers:{
                    token:true
                },
                data:{
                    content
                }
            }).then(res=>{
                if(!res.success) return
                Toast(res.msg)
                this.$router.back()
                console.log(res)
            })
            Toast('已保存');
        },
        //编辑地址中点击修改(content为save的默认回调函数，返回的是用户在表单填写的信息)
        onUpdate(content){
            content.isDefault=content.isDefault ? 1 : 0
            http.$axios({
                url:'/api/updateAddress',
                method: 'POST',
                headers:{
                    token:true
                },
                data:{
                    AddressInfo:content
                }
                
            }).then(res=>{
                if(!res.success) return
                Toast(res.msg)
                this.$router.back()
                console.log(res)
            })
            
           
        },
        //编辑地址中点击删除(content为save的默认回调函数，返回的是用户在表单填写的信息)
        onDelete(content) {
            http.$axios({
                url:'/api/deleteAddress',
                method:'POST',
                headers:{
                    token:true
                },
                data:{
                    id:content.id
                }
            }).then(res=>{
                if(!res.success) return
                Toast(res.msg)
                this.$router.back()
            })
        },
        
    },
  
  }
  </script>
  
  <style lang="less" scoped>
  @rootsize:37.5rem;
  section::before{
      content: '';
      position: fixed;
      left: 0;
      top: 0;
      background-color: #f5f5f5;
      z-index: -1;
      width: 100%;
      height: 100%;
  }
  section{
     
  }
  ::v-deep .van-button--danger {
    background-color: #b0352f;
  }
  ::v-deep .van-button__text{
    font-size: (18 / @rootsize);
  }
  </style>